<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:ui="http://java.sun.com/jsf/facelets" 
	xmlns:h="http://java.sun.com/jsf/html" 
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j" 
	xmlns:rich="http://richfaces.org/rich" 
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:t="http://myfaces.apache.org/tomahawk">
	
<h:head>
	<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8" />
	<meta http-equiv="IMAGETOOLBAR" content="false" />
	<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
	<meta http-equiv="PRAGMA" content="NO-CACHE" />
	<meta http-equiv="X-UA-Compatible" content="IE=9" />
	<title>Administrator</title>
	<h:outputStylesheet library="css" name="catalog.css" />
	<style type="text/css">
.listPanel {
	width: 50%;
	vertical-align: top;
}

.editPanel {
	width: 50%;
	vertical-align: top;
}

.userTable {
	width: 400px;
}

.catalogNodeTable {
	width: 400px;
}
.itemTable {
	width: 450px;
}
</style>
</h:head>
<h:body>
<f:view>
	<h:form id="adminForm">
	<h:inputHidden id="usrMode" value="#{adminBean.usrMode}"/>
	<h:inputHidden id="catnodMode" value="#{adminBean.catnodeMode}"/>
		<h:inputHidden id="itemMode" value="#{adminBean.itemMode}" />
		<rich:popupPanel id="messagePopup" modal="true" resizeable="true" show="#{!empty facesContext.maximumSeverity}" onmaskclick="#{rich:component('messagePopup')}.hide()">
			<f:facet name="header">
				<h:outputText value="Message" />
			</f:facet>
			<f:facet name="controls">
				<h:outputLink value="#" onclick="#{rich:component('messagePopup')}.hide(); return false;">
                X
            </h:outputLink>
			</f:facet>
			<p><rich:messages/></p>
		</rich:popupPanel>
		<div id="headerContainer">
			<div id="headerBanner">My Catalog</div>
			<div id="headerRight">
				<div id="admin"><a href="#{request.contextPath}/admin/logout.jsp">[Logout]</a></div>
			</div>
		</div>
		<!--               User               -->
		<rich:collapsiblePanel header="User Control" switchType="client" expanded="false">
			<h:panelGrid columns="2" width="100%" columnClasses="listPanel,editPanel">
				<h:panelGroup>
					<rich:dataTable id="userTable" value="#{adminBean.sysuserList}" var="sysuser" rows="10" styleClass="userTable">
						<f:facet name="header">
							<rich:columnGroup>
								<rich:column width="150px">
									<h:outputText value="User ID" />
								</rich:column>
								<rich:column width="150px">
									<h:outputText value="Name" />
								</rich:column>
							</rich:columnGroup>
						</f:facet>
						<rich:column>
							<h:commandLink value="#{sysuser.usrid}" actionListener="#{adminBean.selectUser}">
								<f:ajax event="click" render="editUser">
									<f:param name="usrid" value="#{sysuser.usrid}"/>
								</f:ajax>
							</h:commandLink>
						</rich:column>
						<rich:column>
							<h:commandLink value="#{sysuser.name}" actionListener="#{adminBean.selectUser}">
								<f:ajax event="click" render="editUser">
									<f:param name="usrid" value="#{sysuser.usrid}"/>
								</f:ajax>
							</h:commandLink>
						</rich:column>
					</rich:dataTable>
					<div class="userTable">
						<div style="float: right;">
							<rich:dataScroller for="userTable" id="userTableScroller" />
						</div>
					</div>
				</h:panelGroup>
				<h:panelGroup>
					<rich:panel id="editUser" header="User">
						<h:panelGrid columns="2">
							<h:outputLabel value="User ID"/>
							<h:inputText value="#{adminBean.usrid}" size="35" maxlength="35" disabled="#{adminBean.usrMode == 'EDIT'}"/>
							<h:outputLabel value="Name"/>
							<h:inputText value="#{adminBean.usrname}" size="35" maxlength="35"/>
							
							<h:outputLabel value="Old Password" rendered="#{adminBean.showChangePwd}"/>
							<h:inputSecret value="#{adminBean.usrpwd}" size="45" maxlength="45" rendered="#{adminBean.showChangePwd}"/>
							
							<h:outputLabel value="New Password" rendered="#{adminBean.showChangePwd}"/>
							<h:inputSecret value="#{adminBean.usrnewpwd}" size="45" maxlength="45" rendered="#{adminBean.showChangePwd}"/>
							
							<h:outputLabel value="Confirm Password" rendered="#{adminBean.showChangePwd}"/>
							<h:inputSecret value="#{adminBean.usrconfirmpwd}" size="45" maxlength="45" rendered="#{adminBean.showChangePwd}"/>
							
							<h:outputText value="&#160;" />
							<h:panelGroup>
							<h:commandButton value="New" actionListener="#{adminBean.newUser}" disabled="#{adminBean.usrMode == 'NEW'}"></h:commandButton>
							<h:commandButton value="Save" actionListener="#{adminBean.saveUser}" disabled="#{((empty adminBean.usrid) and (adminBean.usrMode == 'EDIT'))}"></h:commandButton>
							<h:commandButton value="Delete" actionListener="#{adminBean.deleteUser}" disabled="#{(empty adminBean.usrid) or (adminBean.usrMode == 'NEW')}"></h:commandButton>
							<h:commandButton value="Clear" actionListener="#{adminBean.clearUser}"></h:commandButton>
	
							</h:panelGroup>
						</h:panelGrid>
					</rich:panel>
				</h:panelGroup>
			</h:panelGrid>
		</rich:collapsiblePanel>
		<!--               Catalog Node               -->
		<rich:collapsiblePanel header="Catalog Node Control" switchType="client" expanded="false">
			<h:panelGrid columns="2" width="100%" columnClasses="listPanel,editPanel">
				<h:panelGroup>
					<rich:dataTable id="catalogNodeTable" value="#{adminBean.catnodeList}" var="catnode" styleClass="catalogNodeTable" rows="10">
						<f:facet name="header">
							<rich:columnGroup>
								<rich:column>
									<h:outputText value="ID" />
								</rich:column>
								<rich:column>
									<h:outputText value="Name" />
								</rich:column>
								<rich:column>
									<h:outputText value="Type" />
								</rich:column>
								<rich:column>
									<h:outputText value="Parent" />
								</rich:column>
							</rich:columnGroup>
						</f:facet>
						<rich:column>
							<h:commandLink value="#{catnode.catid}" actionListener="#{adminBean.selectCatnode}">
								<f:ajax event="click" render="editCatalogNode">
									<f:param name="catid" value="#{catnode.catid}"/>
								</f:ajax>
							</h:commandLink>
						</rich:column>
						<rich:column>
							<h:commandLink value="#{catnode.name}" actionListener="#{adminBean.selectCatnode}">
								<f:ajax event="click" render="editCatalogNode">
									<f:param name="catid" value="#{catnode.catid}"/>
								</f:ajax>
							</h:commandLink>
						</rich:column>
						<rich:column>
							<h:outputText value="#{catnode.cattype}" />
						</rich:column>
						<rich:column>
							<h:outputText value="#{catnode.parentid}" />
						</rich:column>
					</rich:dataTable>
					<div class="catalogNodeTable">
						<div style="float: right;">
							<rich:dataScroller for="catalogNodeTable" id="catalogNodeTableScroller" />
						</div>
					</div>
				</h:panelGroup>
				<h:panelGroup>
					<rich:panel id="editCatalogNode" header="Catalog Node">
						<h:panelGrid columns="2">
							<h:outputLabel value="Catalog ID"/>
							<h:inputText id="catid" value="#{adminBean.catid}" size="5" converter="javax.faces.Integer" disabled="#{adminBean.catnodeMode == 'EDIT'}"/>
							<h:outputLabel value="Name"/>
							<h:inputText value="#{adminBean.catname}" size="45"/>
							
							<h:outputLabel value="Catalog Type"/>
							<h:selectOneMenu value="#{adminBean.cattype}">
								<f:selectItems value="#{adminBean.optionCattype}"/>
							</h:selectOneMenu>
							
							<h:outputLabel value="Parent"/>
							<h:selectOneMenu value="#{adminBean.catparentid}">
								<f:selectItems value="#{adminBean.optionParent}"/>
							</h:selectOneMenu>
							
							<h:outputText value="&#160;" />
							<h:panelGroup>
							<h:commandButton value="New" actionListener="#{adminBean.newCatnode}" disabled="#{adminBean.catnodeMode == 'NEW'}"></h:commandButton>
							<h:commandButton value="Save" actionListener="#{adminBean.saveCatnode}" disabled="#{((empty adminBean.catid) and (adminBean.catnodeMode == 'EDIT'))}"></h:commandButton>
							<h:commandButton value="Delete" actionListener="#{adminBean.deleteCatnode}" disabled="#{(empty adminBean.catid) or (adminBean.catnodeMode == 'NEW')}"></h:commandButton>
							<h:commandButton value="Clear" actionListener="#{adminBean.clearCatnode}"></h:commandButton>
	
							</h:panelGroup>
						</h:panelGrid>
					</rich:panel>
				</h:panelGroup>
			</h:panelGrid>
		</rich:collapsiblePanel>
		<!--               Item               -->
		<rich:collapsiblePanel header="Item Control" switchType="client" expanded="false">
			<h:panelGrid columns="2" width="100%" columnClasses="listPanel,editPanel">
				<h:panelGroup>
					<rich:dataTable id="itemTable" value="#{adminBean.itemList}" var="item" styleClass="itemTable" rows="10">
						<f:facet name="header">
							<rich:columnGroup>
								<rich:column>
									<h:outputText value="Item" />
									<br/>
									<h:outputText value="Description" />
								</rich:column>
								<rich:column>
									<h:outputText value="Price" />
								</rich:column>
								<rich:column>
									<h:outputText value="Hot tem" />
								</rich:column>
								<rich:column>
									<h:outputText value="Catalog Node" />
								</rich:column>
								<rich:column>
									<h:outputText value="Image Path" />
								</rich:column>
							</rich:columnGroup>
						</f:facet>
						<rich:column>
							<h:commandLink value="#{item.item}" actionListener="#{adminBean.selectItem}">
								<f:ajax event="click" render="editItem,uploadForm">
									<f:param name="item" value="#{item.item}"/>
								</f:ajax>
							</h:commandLink>
							<br/>
							<h:outputLabel value="#{item.description}" style="padding-left:10px;">
							</h:outputLabel>
						</rich:column>
						<rich:column style="text-align:right;">
							<h:outputText value="#{item.price}" />
						</rich:column>
						<rich:column style="text-align:center;">
							<h:outputText value="#{item.hot}" />
						</rich:column>
						<rich:column style="text-align:center;">
							<h:outputText value="#{item.catid}" />
						</rich:column>
						<rich:column style="text-align:center;">
							<h:outputText value="#{item.imgpath}" />
						</rich:column>
					</rich:dataTable>
					<div class="itemTable">
						<div style="float: right;">
							<rich:dataScroller for="itemTable" id="itemTableScroller" />
						</div>
					</div>
				</h:panelGroup>
				<h:panelGroup>
					<rich:panel id="editItem" header="Item">
						<h:panelGrid columns="2">
							<h:outputLabel value="Item" />
							<h:inputText value="#{adminBean.item}" size="35" maxlength="35"  disabled="#{adminBean.itemMode == 'EDIT'}"/>
							<h:outputLabel value="Description" />
							<h:inputTextarea value="#{adminBean.itemdesc}" rows="4" cols="70"/>
							
							<h:outputLabel value="Height" />
							<h:panelGroup>
								<h:inputText value="#{adminBean.itemheight}" size="5" maxlength="5"/>
								<h:outputLabel value="m"/>
							</h:panelGroup>
							
							<h:outputLabel value="Length" />
							<h:panelGroup>
								<h:inputText value="#{adminBean.itemlength}" size="5" maxlength="5"/>
								<h:outputLabel value="m"/>
							</h:panelGroup>
							
							<h:outputLabel value="Depth" />
							<h:panelGroup>
								<h:inputText value="#{adminBean.itemdepth}" size="5" maxlength="5"/>
								<h:outputLabel value="m"/>
							</h:panelGroup>							
							
							<h:outputLabel value="Price" />
							<h:inputText value="#{adminBean.itemprice}" size="15" maxlength="15"/>
							
							<h:outputText value="&#160;"/>
							<h:panelGroup>
								<h:selectBooleanCheckbox value="#{adminBean.itemhot}" />
							</h:panelGroup>
							<h:outputLabel value="Catalog Node"/>
							<h:selectOneMenu value="#{adminBean.itemcatid}">
								<f:selectItems value="#{adminBean.optionCatid}"/>
							</h:selectOneMenu>
							
							<h:outputLabel value="Image Path"/>
							<h:panelGroup>
								<h:inputText value="#{adminBean.itemimagepath}" size="50" disabled="true" />
								<h:commandButton value="Upload" disabled="#{(empty adminBean.item) or (adminBean.itemMode == 'NEW')}">
									<rich:componentControl target="uploadPopup" operation="show" />
								</h:commandButton>
							</h:panelGroup>
							<h:outputText value="&#160;"/>
							<h:panelGroup>
								<h:commandButton value="New" actionListener="#{adminBean.newItem}" disabled="#{adminBean.itemMode == 'NEW'}"></h:commandButton>
								<h:commandButton value="Save" actionListener="#{adminBean.saveItem}" disabled="#{((empty adminBean.item) and (adminBean.itemMode == 'EDIT'))}"></h:commandButton>
								<h:commandButton value="Delete" actionListener="#{adminBean.deleteItem}" disabled="#{(empty adminBean.item) or (adminBean.itemMode == 'NEW')}"></h:commandButton>
								<h:commandButton value="Clear" actionListener="#{adminBean.clearItem}"></h:commandButton>
		
							</h:panelGroup>
						</h:panelGrid>
					</rich:panel>
				</h:panelGroup>
			</h:panelGrid>
		</rich:collapsiblePanel>
		
	</h:form>
		<rich:popupPanel id="uploadPopup" modal="true" width="480" height="80" resizeable="true" onmaskclick="#{rich:component('uploadPopup')}.hide()">
			<f:facet name="header">
				<h:outputText value="Upload Item Image" />
			</f:facet>
			<f:facet name="controls">
				<h:outputLink value="#" onclick="#{rich:component('uploadPopup')}.hide(); return false;">
				X</h:outputLink>
			</f:facet>
			<h:form id="uploadForm" enctype="multipart/form-data">
				<h:inputHidden value="#{adminBean.item}"/>
				<t:inputFileUpload value="#{adminBean.uploadedFile}" size="63" />
				<h:commandButton value="submit" action="#{adminBean.uploadFile}" />
			</h:form>
		</rich:popupPanel>
	</f:view>
</h:body>
</html>